<template>
  <el-container style="height: 100vh; overflow: hidden;">
    <el-aside 
      v-if="$route.path.startsWith('/admin')" 
      width="200px" 
      style="background-color: rgb(238, 241, 246)">
      <el-menu router :default-openeds="['0', '1']">
        <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.show">
          <template slot="title">{{item.name}}</template>
          <el-menu-item v-for="(item2,index2) in item.children" :index="item.path+'/'+item2.path"
                        :class="$route.path.includes(item2.path)?'is-active':''">{{item2.name}}</el-menu-item>
        </el-submenu>
        <el-menu-item index="/logout" @click="handleLogout">
          <i class="el-icon-switch-button"></i>
          <span>退出登录</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main :style="$route.path.startsWith('/admin') ? {} : {marginLeft: '0'}">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    methods: {
      handleLogout() {
        localStorage.removeItem('userRole')
        localStorage.removeItem('username')
        this.$router.push('/login')
      }
    }
  };
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #app {
    height: 100%;
  }
</style>
